<template>
  <!-- <div> -->
    <div class="chart-container" :id="id" v-if="chartType==='line'" style="position: absolute; left: 0%; right: 0%; top: 0px; bottom: 0%; z-index:9; height: 100%;"></div>
    <!-- <div class="chart-container" id="charts2" v-else-if="chartType==='pie'"></div> -->
  <!-- </div> -->
</template>

<script>
  import * as echarts from 'echarts' // 引入ECharts库
  export default {
    name: "echarts",
    data() {
        return {
            chart1: null,
            chart2: null,
        };
    },
    props: {
        id: {
            type: String,
            default: () => {
              return 'chart1'
            }
        },
        // chart类型  line折线图  bar柱状图 pie饼状图
        chartType: {
            type: String,
            default: () => {
              return 'line'
            }
        },
        lineData:{
          type: Array,
          default: () => {
            return []
          }
        },
        // 饼状图数据
        pieData: {
          type: Object,
          default: () => {
            return {}
          }
        }
    },
    watch: {
        chartType: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                  if(newVal ==='line') {
                   this.initChartLine()
                  } else if(newVal ==='pie') {
                    this.initChartPie()
                  }
                  
                })
            },
            deep: true,
            immediate: true,
        }
    },
    mounted() {
      window.addEventListener('resize', this.resizeChart);
    },
    methods: {
      // 折线图
      initChartLine() {
        // this.lineData.forEach(item=>{
        //   item.name = item.label
        // })
        // const data = this.lineData
        const data =  [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
        this.chart1 = echarts.init(document.getElementById(this.id))
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'center',
            left: '50%',
            orient: 'vertical',
            textStyle: {
              fontSize: '16px',
              lineHeight: 30,
            },
            formatter: function (name) {
              const value = data.filter(x => x.name == name)[0].value
              return name + ' ' +value;
            }
          },
          series: [
            {
              // name: '',
              type: 'pie',
              center: ['25%', '50%'],
              radius: ['45%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              // emphasis: {
              //   label: {
              //     show: true,
              //     fontSize: 20,
              //     fontWeight: 'bold'
              //   }
              // },
              labelLine: {
                show: false
              },
              data: data
            }
          ]
        }
        this.chart1.setOption(option)
      },
      resizeChart() {
        let chartDom = document.getElementById(this.id);
        let myChart = echarts.getInstanceByDom(chartDom);
        if (myChart == null) {
          this.initChartLine();
        } else {
          myChart.dispose();
          this.initChartLine();
        };
      }
    }
  }
</script>
<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 260px;
}
</style>
